<template>
  <div class="message-box column">
    <div class="text-center q-pt-md">{{ currentType.label }}</div>
    <div
      class="row q-my-sm q-gutter-x-sm no-wrap full-width justify-center items-center"
    >
      <template v-for="type in types">
        <q-btn
          rounded
          v-if="type.type == 0"
          :outline="currentType.type !== type.type"
          label="ALL"
          :key="type.type"
          color="sub"
          @click="changeType(type)"
          padding="3px 10px"
        ></q-btn>
        <q-btn
          rounded
          :outline="currentType.type !== type.type"
          v-else
          :icon="currentType.type !== type.type ? type.icon : type.activeIcon"
          :key="type.icon"
          color="sub"
          @click="changeType(type)"
          padding="3px 10px"
        ></q-btn>
      </template>
    </div>
    <q-separator color="#404040" />
    <div class="col q-pa-sm">
      <q-scroll-area class="scroller">
        <MessageItem
          v-for="msg in filteredMessages"
          :key="msg.id"
          :message="msg"
        ></MessageItem>
      </q-scroll-area>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, computed, onBeforeMount } from 'vue';
import Message, { MessageType } from 'src/models/Message';
import MessageItem from './MessageItem.vue';
import { useUserStore } from 'src/stores/user-store';
const userStore = useUserStore();
const messages = computed(() => userStore.messages);
const filteredMessages = ref<Message[]>([]);

const types = ref<IType[]>([
  {
    type: 0,
    label: 'ALL NOTIFICATIONS',
    icon: '',
    activeIcon: '',
  },
  {
    type: 1,
    label: 'FOLLOWING',
    icon: 'mdi-account-arrow-right',
    activeIcon: 'mdi-account-arrow-right',
  },
  {
    type: 3,
    label: 'FOLLOWERS',
    icon: 'mdi-account-arrow-left',
    activeIcon: 'mdi-account-arrow-left',
  },
  {
    type: 5,
    label: 'LIKES & DISLIKES',
    icon: 'mdi-thumbs-up-down',
    activeIcon: 'mdi-thumbs-up-down',
  },
  {
    type: 7,
    label: 'COMPLIMENTS',
    icon: 'img:/icons/podium.svg',
    activeIcon: 'img:/icons/podium-white.svg',
  },
  {
    type: 4,
    label: 'LINKED AUDIOS',
    icon: 'img:/icons/video-info-record.svg',
    activeIcon: 'img:/icons/video-audio-link-white.svg',
  },
]);
const currentType = ref(types.value[0]);
onBeforeMount(async () => {
  await userStore.getMessages();
  console.log(userStore.messages);
  filteredMessages.value = messages.value;
});
function changeType(type: IType) {
  currentType.value = type;
  if (type.type === 0) {
    filteredMessages.value = messages.value;
  } else if (type.type === 1) {
    filteredMessages.value = messages.value!.filter((msg) => {
      if (msg.type === 1 || msg.type === 2) {
        return msg;
      }
    });
  } else if (type.type === 5) {
    filteredMessages.value = messages.value!.filter((msg) => {
      if (msg.type === 5 || msg.type === 6) {
        return msg;
      }
    });
  } else {
    filteredMessages.value = messages.value!.filter(
      (msg) => msg.type === type.type
    );
  }
}
interface IType {
  type: number;
  label: string;
  icon: string;
  activeIcon: string;
}
</script>
<style lang="scss" scoped>
.message-box {
  overflow: hidden;
  width: 370px;
  height: 468px;
  background-image: linear-gradient(to bottom right, #2a2a2a, #1e1e1e);
  .scroller {
    width: 100%;
    height: 100%;
  }
}
</style>
